<script setup>
import { ref } from 'vue'
import Like from './like.vue'
const reList = ref([
    { imgUrl: 'bg.jpg', name: '剑来', author: '烽火戏诸侯', desc: '简介' },
    { imgUrl: 'bg.jpg', name: '剑来', author: '烽火戏诸侯', desc: '简介' },
    { imgUrl: 'bg.jpg', name: '剑来', author: '烽火戏诸侯', desc: '简介' },
    { imgUrl: 'bg.jpg', name: '剑来', author: '烽火戏诸侯', desc: '简介' }
]);
</script>

<template>
    <div class="recommend">
        <div class="recommend-like">
            <h3>为你推荐</h3>
            <Like />
        </div>
        <div class="recommend-list">
            <ul>
                <li v-for="(item, i) in reList" :key="i">
                    <div class="recommend-img">
                        <img :src="`/src/assets/images/${item.imgUrl}`" :alt="item.name">
                    </div>
                    <div class="recommend-title">
                        <h4>{{ item.name }}</h4>
                        <p class="recommend-title-author">{{ item.author }}</p>
                        <p class="recommend-title-desc">{{ item.desc }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped></style>